<template>
	<div class="accountinformation">
		<header class="header">
		    <span class="transactionprice">交易金额</span>
		    <span class="transactionamount">{{account.transactionAmount}}</span>
		</header>
		<body class="body">
		    <div class="content">
		    	<p>
		    		<span class="title">交易类型</span>
		    		<span class="des" v-if="account.recordType == 1">充值</span>
		    		<span class="des" v-else-if="account.recordType == 2">微信支付</span>
		    		<span class="des" v-else-if="account.recordType == 3">账户支付</span>
		    		<span class="des" v-else-if="account.recordType == 4">账户可用金额解冻</span>
		    		<span class="des" v-else>账户可用金额冻结</span>
		    	</p>
		    	<p>
		    		<span class="title">时间</span>
		    		<span class="des">{{account.transactionTime}}</span>
		    	</p>
		    	<p>
		    		<span class="title">商家单号</span>
		    		<span class="des">{{account.outTradeNo}}</span>
		    	</p>
		    	<p>
		    		<span class="title">微信单号</span>
		    		<span class="des">{{account.wxTransactionId}}</span>
		    	</p>
		    	<p>
		    		<span class="title">帐户总额</span>
		    		<span class="des">{{account.totalAmount}}</span>
		    	</p>
		    	<p>
		    		<span class="title">冻结金额</span>
		    		<span class="des">{{account.freezeAmount}}</span>
		    	</p>
		    	<p>
		    		<span class="title">备注</span>
		    		<span class="des">{{account.noteDesc}}</span>
		    	</p>
		    </div>
		</body>
	</div>
</template>

<script>
	export default {
		name:'accountinformation',
		data () {
			return {
				account:''
			}
		},
		mounted () {
			this.getAccount()
		},
		methods:{
			//获取账单详情
			getAccount () {
				this.$http.get(this.$store.state.reqUrl + '/customer/account/accountRecord/'+this.$route.query.account_id, {}).then(res => {
				if(res.status == 200) {
				 this.account = res.data;
				}
			  })
			}
		}
	}
</script>

<style lang="less" scoped>
    .accountinformation{
    	width:100%;
    	background: #FFFFFF;
    	.header{
    		padding:40px 30px;
    		border-bottom:1px solid gainsboro;
    		.transactionprice{
    			font-size: 28px;
    			color: darkgray;
    		}
    		.transactionamount{
    			font-size: 38px;
    			color:#000000;
    			font-weight: 800;
    			float: right;
    		}
    	}
    	.body{   	
    		background: #FFFFFF;	
    		.content{
    			padding:30px 30px;
    			line-height: 60px;
    			border-bottom:1px solid gainsboro;
    			p{
    				.title{
    					font-size: 28px;
    			        color: darkgray;
    				}
    				.des{
    					float: right;
    					font-size: 28px;
    					color: #000000;
    					font-weight: 500;   					
    				}
    			}
    		}
    	}
    }

</style>